.root {
  --ni-right-section-width-xs: 17px;
  --ni-right-section-width-sm: 24px;
  --ni-right-section-width-md: 27px;
  --ni-right-section-width-lg: 31px;
  --ni-right-section-width-xl: 34px;
}

.controls {
  --ni-chevron-size-xs: 10px;
  --ni-chevron-size-sm: 14px;
  --ni-chevron-size-md: 16px;
  --ni-chevron-size-lg: 18px;
  --ni-chevron-size-xl: 20px;
  --ni-chevron-size: var(--ni-chevron-size-sm);

  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(var(--input-height) - rem(2px));
  max-width: calc(var(--ni-chevron-size) * 1.7);
  margin-inline-start: auto;
}

.control {
  --control-border: 1px solid var(--input-bd);
  --control-radius: calc(var(--input-radius) - rem(1px));

  flex: 0 0 50%;
  width: 100%;
  padding: 0;
  height: calc(var(--input-height) / 2 - rem(1px));
  border-inline-start: var(--control-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mantine-color-text);
  background-color: transparent;
  cursor: pointer;

  &:where(:disabled) {
    background-color: transparent;
    cursor: not-allowed;
    opacity: 0.6;
    color: var(--mantine-color-disabled-color);
  }

  .root[data-error] :where(&) {
    color: var(--mantine-color-error);
  }

  @mixin hover {
    @mixin where-light {
      background-color: var(--mantine-color-gray-0);
    }

    @mixin where-dark {
      background-color: var(--mantine-color-dark-4);
    }
  }

  &:where(:first-of-type) {
    border-radius: 0;
    border-start-end-radius: var(--control-radius);
  }

  &:last-of-type {
    border-radius: 0;
    border-end-end-radius: var(--control-radius);
  }
}
